<template>
  <div @click="backTop" v-if="isShow">
    <div class="back-top">
      <img src="~assets/img/home/backtop.png" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  name: "detailBackTop",
  data() {
    return {
      isShow: false,
    };
  },
  methods: {
    backTop() {
      // 动画
      let old = 9999999999;
      let timer = setInterval(function () {
        let osTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        if (old <= osTop) {
          clearInterval(timer);
        }
        let isSpeed = Math.floor(-osTop / 10);
        document.documentElement.scrollTop = document.body.scrollTop =
          osTop + isSpeed;
        if (osTop === 0) {
          clearInterval(timer);
        }
        old = osTop;
      }, 10);
    },
  },
  mounted() {
    window.onscroll = () => {
      this.isShow = window.pageYOffset >= 1000;
    };
  },
};
</script>

<style scoped>
.back-top {
  position: fixed;
  width: 40px;
  bottom: 80px;
  right: 24px;
  z-index: 999;
}
img {
  width: 100%;
}
.back-top:after {
  position: absolute;
  content: "";
  width: 22px;
  height: 22px;
  left: 10px;
  top: 10px;
  background-color: white;
  z-index: -1;
}
</style>
